﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>抽奖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        i {
            font-style: normal;
        }

        .prize_con {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(images/firstp_bg.jpg) no-repeat left top / 100% 100%;
            overflow: hidden;
        }

        .prize_grade {
            font-size: 98px;
            color: #ffe9af;
            text-align: center;
            margin: 60px auto 0;
        }

        .prize_list {
            width: 56%;
            min-width: 825px;
            min-height: 230px;
            height: 38%;
            margin: 20px auto 55px;
            text-align: center;
            overflow: hidden;
        }

        .prize_list:hover {
            overflow: auto;
        }

        /*定义滚动条宽*/
        .prize_list::-webkit-scrollbar {
            width: 8px;
        }

        /*定义滚动条的轨道*/
        .prize_list::-webkit-scrollbar-track {
            background-color: #ffffff;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
        }

        /*定义滚动条的滑块*/
        .prize_list::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, .5);
        }

        .prize_list ul {
            width: 100%;
            font-size: 0;
        }

        .prize_list li {
            display: inline-block;
            font-size: 45px;
            color: #f1bf90;
            text-align: center;
            width: 20%;
            line-height: 100px;
            font-family: Arial;
        }

        .start {
            width: 250px;
            height: 90px;
            margin: 0 auto;
            cursor: pointer;
        }

        .prize_set {
            position: absolute;
            right: 60px;
            bottom: 50px;
            font-size: 16px;
            color: #f7f3e8;
            line-height: 30px;
        }

        .prize_set li {
            display: inline-block;
            margin-left: 20px;
        }

        .set_grade select, .set_people input, .set_money input {
            background: #fff;
            width: 110px;
            height: 36px;
            border: 1px solid #8f0000;
            margin-left: .1rem;
            color: #000;
            padding-left: 10px;
        }
    </style>

</head>
<body>

<div class="wrap">
    <div class="prize_con">
        <p class="prize_grade">
            <span>鸿运当头</span>
        </p>
        <div class="prize_list">
            <ul>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
                <li>000000</li>
            </ul>
        </div>
        <p class="start"><img src="images/prize_start.png" alt=""></p>
        <ul class="prize_set">
            <li class="set_grade">奖等
                <select id="set_grade">
                    <option value="0">选择奖等</option>
                    <option value="s">特等奖</option>
                    <option value="1">一等奖</option>
                    <option value="2">二等奖</option>
                    <option value="3">三等奖</option>
                </select>
            </li>
            <li class="set_people">人数<input type="number" value="10" placeholder="中奖人数" id="prizeCount"></li>
        </ul>
    </div>
</div>
<input type="hidden" value="0" id="prize_btn">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script>
    var myNumber;
    var arr = [];
    //池
    var code = ['600288', '300350', '002753', '600533', '300436', '300363', '002212', '002128', '603008', '600276', '002032', '603328', '300666', '300127', '300342', '300098', '300236', '600050', '600028', '300017', '300496', '601881', '300024', '300036', '000333', '000538', '300450', '600635', '000725', '000858', '002024', '000651', '002001', '002007', '300121', '600741', '600298'];

    $(function () {
        $(".start").click(function () {
            var num;
            var grade = $("#set_grade").val();
            if (grade == "0") {
                alert("请选择奖等");
                return;
            }
            if (!$("#prizeCount").val()) {
                alert("请选择奖等");
                return;
            }
            num = $("#prizeCount").val();

            if ($("#prize_btn").val() == 0) {
                $("#prize_btn").val(1);
                $(this).find("img").attr("src", "images/prize_stop.png");

                myNumber = setInterval(function () {
                    showRandomNum(num);
                }, 30);

            } else {
                $("#prize_btn").val(0);
                $(this).find("img").attr("src", "images/prize_start.png");

                clearInterval(myNumber);
            }
        });

        //随机所有的code并且不重复
        function showRandomNum(num) {
            var li = "";
            for (var i = 0; i < code.length; i++) {
                arr[i] = i;
            }
            arr.sort(function () {
                return 0.5 - Math.random();
            });

            for (var i = 0; i < num; i++) {
                var index = arr[i];
                li += '<li>' + code[index] + '</li>';
            }

            $(".prize_list ul").html(li);
        }

        //回车键控制开始和停止
        $(document).keydown(function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) { // enter 键
                $(".start").click();
            }
        });

        $("#set_grade").change(function () {
            $(".prize_grade span").text($(this).find("option:selected").text());
        });
    });
</script>

</body>
</html>
